<template>
    <div style="padding-top: 30px;padding-left: 50px">
        <div :id="'multiPieChart' + pieSet.pieIndex" ref="multiPieChart" style="width: 100%; height: 30vh"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "pieChart",
        data() {
            return {
                timer: null,
                option: {
                    xAxis: [
                        {
                            data: []
                        }
                    ],
                    yAxis: [

                    ],
                    series: [

                    ]
                }
            }
        },
        props: {
            pieSet: { type: Object, required: true }
            // data: { type: Object, required: true }
        },
        methods: {
            createLineChart() {
                var chartDom = this.$refs.multiPieChart
                var myChart = echarts.init(chartDom);
                this.option.series.forEach(item => {
                    item.data = []
                })
                this.option.xAxis[0].data = []
                this.option = {
                    grid:{
                        x:85,
                        y:55,
                        x2:50,
                        y2:50,
                        borderWidth:10
                    },
                    title: {
                        text: this.pieSet.title,
                        textStyle: {
                            fontSize: 15,
                            fontWeight: 'normal',              //标题颜色
                            color: '#ffffff',
                        },
                    },
                    legend: {
                        show: true,
                        data: ['66KV', '全厂'],
                        orient:"vertical",
                        x:0,
                        y:110,
                        width:'100',
                        padding:[10, 30,0 ,0],
                        itemWidth:30,
                        textStyle:{
                            color:'#fff',
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'pie'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    angleAxis: {
                        type: 'category',
                        data: ['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',  //更改坐标轴文字颜色
                                fontSize : 14      //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#315070' //更改坐标轴颜色
                            }
                        }
                    },
                    radiusAxis: {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'rgb(150,150,150)',  //更改坐标轴文字颜色
                                fontSize : 12      //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#315070' //更改坐标轴颜色
                            }
                        }
                    },
                    polar: {},
                    series: [
                        {
                            type: 'bar',
                            data: [152235, 60000, 150000, 60000, 90000, 1100, 7000],
                            coordinateSystem: 'polar',
                            name: '66KV',
                            stack: 'a',
                            emphasis: {
                                focus: 'series'
                            },
                            color:'rgb(3,174,236)'
                        },
                        {
                            type: 'bar',
                            data: [152235, 60000, 150000, 90000, 90000, 1100, 7000],
                            coordinateSystem: 'polar',
                            name: '全厂',
                            stack: 'a',
                            emphasis: {
                                focus: 'series'
                            },
                            color:'rgb(60,100,200)'
                        }
                    ]
                };

                this.option && myChart.setOption(this.option);
            }
        },
        mounted() {
            this.createLineChart()
            this.timer = setInterval(() => {
                this.createLineChart()
            }, 10000)
        },
        beforeDestroy () {
            clearInterval(this.timer)
        }
    }
</script>

<style scoped>

</style>
